<!-- 联系人 -->
<template>
  <div class='contacts'>
    <el-scrollbar>
      <div class="contactsInfo">
        <div class="info" v-for="(item,index) in chat" :key="index" :class="{'infoIsActive':infoIsActive==index}"
          @click="selectChat(index,item)">
          <div class="avatar">
            <el-badge :value="item.unReadNum" :hidden="item.unReadNum == 0" :max="99" class="item">
              <!-- <img src="../../../../assets/img/avatar.png" alt=""> -->
              <el-avatar :size="50" :src="require('../../../../assets/img/exp.png')"></el-avatar>
            </el-badge>
          </div>
          <div class="informationDetail">
            <p class="information">
              <!-- <span class="name">{{item.receiverUserName || '暂无'}}</span> -->
              <span
                class="name">{{item.senderUserAccountType == 1 ? item.receiverUserName : item.senderUserName}}</span>
              <span class="time">{{item.updateTime.slice(0, 11)}}</span>
            </p>
            <p class="jobDetails">
              <span class="companyInfoName">{{item.companyName || '暂无'}}</span>
              <el-divider direction="vertical"></el-divider>
              <span class="jobName">{{item.jobName || '暂无'}}</span>
            </p>
          </div>
        </div>
        <div class="noContacts" v-show="chat.length<=0">
          <h6>还未与任何HR进行过沟通</h6>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { chatGet } from '@/api/chat'
import bus from '@/components/common/bus';
export default {
  components: {},
  data () {
    return {
      // 信息数量
      num: 100,
      // 动态class
      infoIsActive: -1,
      chat: [
        // { id: '18595747406', name: '杨磊', jobId: '2', resumeId: '2', senderUserId: '3', receiverUserId: '2' }]
      ],
      // 职位详情
      jobDetails: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 选中当前联系人 获取相关信息
    selectChat (i, item) {
      this.infoIsActive = i
      this.$emit('contactsInfo', item)
    },
    // 获取联系人列表
    chatGet () {
      let obj = {}
      chatGet(obj).then(res => {
        if (res.success) {
          this.chat = res.data
          // 默认发起聊天
          if (res.data.length > 0) {
            this.$emit('contactsInfo', res.data[0])
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created () {
    // 获取联系人列表
    this.chatGet()
    // 清空已读数量
    bus.$on('focusEvents', (res) => {
      this.chat.map(item => {
        if (item.id == res.id) {
          item.unReadNum = 0
        }
      })
    })

    // 获取未读数量
    bus.$on('uncount', (res) => {
      this.chat.map(item => {
        if (item.chatId == res.chatId) {
          item.unReadNum = res.unRead
        }
      })
    })
  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.contactsInfo {
    width: 100%;
    height: 550px;
}

.info {
    width: 270px;
    height: 80px;
    padding: 0 16px;
    border: 1px solid rgba(232, 232, 232, 1);
    border-left: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.info:active {
    background: rgba(242, 247, 249, 0.7);
}
.info:hover {
    background: rgba(242, 247, 249, 0.5);
}
.infoIsActive {
    background: rgba(242, 247, 249, 1);
    /* 一会去掉 */
    /* transform: rotate(360deg);
    transition: transform 1.3s linear; */
}
.avatar {
    width: 44px;
    height: 44px;
    margin-right: 15px;
    border-radius: 50%;
}
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 1;
}

.avatar /deep/ .el-badge__content.is-fixed {
    right: 15px;
    top: 5px;
}

.informationDetail {
    width: calc(100% - 70px);
    line-height: 30px;
}

.information {
    display: flex;
    justify-content: space-between;
}
.information .name {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 600;
}

.information .time {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #555555;
}

.jobDetails {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    height: 20px;
    color: #555555;
    display: flex;
    align-items: center;
}
.jobDetails .companyInfoName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85px;
    display: inline-block;
}

.jobDetails .jobName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85px;
    display: inline-block;
}

.jobDetails /deep/ .el-divider {
    background: #707070;
}
.noContacts {
    height: 100%;
    text-align: center;
    /* line-height: 593px; */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(232, 232, 232, 1);
}
</style>